<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <img alt="Vue logo" src="@/assets/logo.png" />
    <img alt="Vue logo" :src="avatar" />
    <img alt="Vue logo" :src="`${baseUrl}assets/logo.png`" />
    <img v-for="(pic,index) in pics" :key="index" :src="pic.file" alt />
    <div class="img"></div>
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <button @click="testUpload">打开文件</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  components: {
    HelloWorld
  },
  data() {
    return {
      baseUrl: process.env.BASE_URL,
      avatar: "src/assets/logo.png", //src/assets/logo.png
      files: [],
      pics: []
    };
  },
  methods: {
    testUpload() {
      console.log(process.env.BASE_URL);
      let opts = {
        name: "file",
        multiple: "multiple",
        onReadFiles: this.readFiles
      };
      let Up = new this.UploadLight(opts);
      Up.handleUploadClick();
    },
    readFiles: function(filesObj) {
      console.log(filesObj);
      const { originFiles, rebuildFiles } = filesObj;
      this.avatars = rebuildFiles[0].file;
      this.pics = rebuildFiles;
      this.files = originFiles[0];
    }
  }
};
</script>

<style scoped>
img {
  max-width: 100%;
  display: block;
}
.img {
  height: 400px;
  width: 400px;
  background-image: url("../assets/temp.png");
  background-size: cover;
  background-position: center;
}
button {
  padding: 5px 15px;
  border: solid 1px coral;
}
</style>